<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i
			><span>运单查询</span
			><i class="iconfont icon-shanguangdeng" @click="flashOpenOrClose"></i
			><i class="iconfont closeScan" @click="closeScan">关闭</i>
		</header>
		<div class="common-box">
            <div class="content-box">
                <v-scan
                @scanData="scanData"
                ref="ch"
                :switchScan="switchScan"
                :loadingData="loadingData"
                ></v-scan>
            </div>
		</div>
		<div class="tab">
			<div @click="changeTab('订单')" :class="type == '订单' ? 'active' : ''">详情</div>
			<div @click="changeTab('路由')" :class="type == '路由' ? 'active' : ''">路由</div>
			<div @click="changeTab('异常')" :class="type == '异常' ? 'active' : ''">异常</div>
		</div>
		<div class="order-list" v-if="type == '订单'">
			<div v-if="orderInfo && orderInfo.omsNo">
				<div><span>母单号：</span>  {{ orderInfo.omsNo }}</div>
				<div><span>母单件数：</span>  {{ orderInfo.orderQty }}</div>
				<div><span>司机姓名：</span> <span style="font-size: 20px;font-weight: 700;color: red">{{ orderInfo.driverName }}</span></div>
				<div><span>收货城市：</span> {{ orderInfo.receivePartyCity }}</div>
				<div><span>收货地址：</span> {{ orderInfo.receivePartyAddr1 }}</div>
				<div><span>备注：</span> {{ orderInfo.remark }}</div>
			</div>
			<div v-else class="no-data">暂无数据</div>
		</div>
		<div class="scan-label" v-if="type == '路由'">
			<div v-for="(item, index) in scanLabelList" :id="index" :key="index">
				<div class="scan-label-item">
					<div class="selectAddress"> 子单号：<span>{{ item.labelNo }}</span></div>
					<div class="time-person">
						<div class="scan">扫描人: <span>{{ item.scanPerson }}</span></div>
						<div>扫描时间: <span>{{ item.scanTime }}</span></div>
					</div>
					<div class="selectAddress">扫描地址：<span>{{ item.selectAddress }}</span></div>
					<div class="selectAddress">GPS地址：<span>{{ item.address }}</span></div>
					<div class="selectAddress">扫描类型：<span>{{ item.labelType }}</span></div>
				</div>
			</div>
		</div>
		<div class="abnormal-list" v-if="type == '异常'">
			<div v-for="(item, index) in abnormalList" :id="index" :key="index">
				<div class="abnormal-list-item">
					<div class="time-person">
						<div class="scan">发起人: <span>{{ item.sponsorName }}</span></div>
						<div>发起时间: <span>{{ item.sponsorTime }}</span></div>
					</div>
					<div class="time-person2">
						<div class="left">异常环节: <span>{{ item.abnormalLink }}</span></div>
						<div>异常原因: <span>{{ item.abnormalReason }}</span></div>
					</div>
					<div class="selectAddress">异常描述:<span>{{ item.abnormalExplain }}</span></div>
					<div class="selectAddress">异常图片:
						<div v-for="(ele, i) in item.uploadDocumentList" :id="i" :key="i">
							<img @click="openViewImg('http://114.132.120.93/prod/system/uploadDocument/viewFileContent?id=' + ele.id + '&cy-token=' + token)" :src="'http://114.132.120.93/prod/system/uploadDocument/viewFileContent?id=' + ele.id + '&cy-token=' + token" width="60" style="margin-right: 10px"/>
						</div>
					</div>
					<div class="time-person2">
						<div class="left">责任方: <span>{{ item.responsibleParty }}</span></div>
						<div>处理人: <span>{{ item.downPerson }}</span></div>
					</div>
					<div class="time-person2">
						<div>处理时间: <span>{{ item.downTime }}</span></div>
					</div>
					<div class="selectAddress">处理结果:<span>{{ item.downResult }}</span></div>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible" width="85%" top="40vh">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
  import Uploader from '@/components/uploader'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery"
	import { iatRecorder } from '@/utils/iatRecorder'
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
			'v-scan': Scan,
      'v-header': Header,
      'v-uploader': Uploader, // 上传组件
      'pictureSample': pictureSample
		},
		data() {
			return {
				dialogVisible: false,
				dialogImageUrl: '',
				token: localStorage.getItem('jwt'),
				type: '订单',
				orderInfo: {},
				abnormalList: [],
				scanLabelList: [],
				code: '',
				loadingData: false,
				fetchObj,
				headerName: '上报异常',
				responseData: {},
				OMS: {},
				aboType: '', // 异常类型
				typeOptions: [], // 异常类型下拉
				aboReason: '',
				reasonOptions: [],
				recipientContactList: ['寄方', '收方'], // 改派收件联系人选择列表
        reassignRecipientContact: '', // 改派收件联系人
        reassignmentAppointmentTime: this.timestampFormat(new Date().getTime(), 'YYYY-MM-DD'), // 改派预约日期
        appointmentPeriod: '', // 改派预约时间段
        appointmentPeriodList: [], // 改派预约时间段数组
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        },
				localtttOptions: [],
				aboLink: '',
				linkOptions: [],
				aboPer: '',
				perOptions: [],
				aboText: '', // 异常描述
				allData: {}, // 所有异常数据
        uploadParams: {}, // 图片上传附带参数
				switchScan: true,
				CurrentCity: '', // 当前城市
				CurrentLocation: '', // 当前地址
				CurrentDistrict: '', // 当前区县
				longitude: '',
				latitude: '',
				labelList: [], // 标签号列表
				selectedLabelList: [], // 已选择的标签号列表
				labelInput: '', // 手动输入的标签
				iatRecorder3: null,
				mySecond: 0,
				startPerform: false,
        sampleShow: false, // 图片示例是否展示
				sfNetworkNum: '', //  网点人员工号 401107
				projectType: 0, // 订单类型
				sfNetCode: '', // 网点代码
        businessType: '' // 产品名称
			}
		},
		watch: {
			aboType(val, oval) {
				let that = this;
				if (val != oval) {
					that.aboReason = '';
					for (let ty = 0; ty < that.allData.newAbnormalType.length; ty++) {
						if (that.allData.newAbnormalType[ty].abnormalType == val) {
							that.reasonOptions = that.allData.newAbnormalType[ty].abnormalReason;
						}
					}
				}
			}
		},
		mounted() {
			// this.getAboList();
			// try {
			// 	CallAndroidOrIOS.ContinuousScan();
			// } catch (error) {}
	// 		//初始化语音
	// 		//这里用一个iatRecorder3接是为了保持当前vue既用到了语音 又可以有自己的私有方法
	// 		this.iatRecorder3= iatRecorder;
	// 		// 接收语音转文字结果
	// 		this.myData(this.iatRecorder3);
			// 异常环节   abnormalLinkMap  '派送'
			// 异常类型   newAbnormalType:abnormalType  '客户类'
			// 异常原因   newAbnormalType:abnormalReason  '寄方客户要求退回'  '客户要求转寄其它地址'
		},
		// beforeDestroy() {
		// 	this.iatRecorder3.destroyFn()
		// },
		created() {},
		methods: {
			// 图片预览
			openViewImg (url) {
				this.dialogVisible = true
				this.dialogImageUrl = url
			},
			changeTab (type) {
				this.type = type
			},
			ScanSFNumber(inputName) {
				window.QRScanAjax = this.QRScanSFNumber;
				window.TellVue_QRScanResult_Ajax = this.QRScanSFNumber;
				this.$store.state.ScanQRCodeInputName = inputName;
				if (!(this.getItem('SXJF_ifScan') && this.getItem('SXJF_ifScan') == '是')) {
					// 安卓
					try {
						CallAndroidOrIOS.VueSCAN();
					}
					catch(error) {}
				}
				// 苹果
				try {
					window.webkit.messageHandlers.messageSend.postMessage({
						a: '调用app原生扫描二维码/条码',
						b: inputName
					})
				} catch (error) {}
			},
			QRScanSFNumber(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
			},
			// 接收iOS/android值
			QRScanAjax(qrcode) {
				let that = this;
				let inputName = this.$store.state.ScanQRCodeInputName;
				this[inputName] = qrcode;
				this.confirmLabelInput();
			},
			SetCurrAddress(lngad) {
				this.ReceivingLatitud(lngad);
			},
			/**
			 * 提交异常
			 */
			onSuccess() {
				this.$router.back(-1);
			},
			onErr() {
				this.$router.back(-1);
			},
			sampleAppear() {
				this.sampleShow = true;
			},
			// 确定扫描 或 手动输入的标签
			confirmLabelInput() {
				let that = this;
				that.labelList.forEach(function (item, idx) {
				if (that.labelInput == item.productNo) {
					item.ifSelect = true;
					$('.SingleLatitudeBox_box>div').eq(idx).children('span.iconfont').removeClass(
						'icon-weixuanzhong').addClass('icon-xuanzhong');
					that.selectedLabelList = that.selectedLabelList.filter(items => {
					return items !== item.productNo
					})
					that.selectedLabelList.push(item.productNo);
				}
				})
			},
			// 请求下拉框数据
			getAboList() {
				
				let that = this;
				this.httpRequest1('post', '/system/app/abnormalSeleteData', {}).then(res => {
				that.typeOptions = res.data.abnormalType// 异常类型
				that.reasonOptions = res.data.abnormalReason // 异常原因
				that.linkOptions = res.data.abnormalLink // 异常环节
				that.perOptions = res.data.responsibleParty// 责任方
				})
			},
		// 扫描后
			scanData(data) {
				let that = this;
				let postData = {
					omsNo: data // 单号
				};
				that.orderInfo = {}
				that.abnormalList = []
				that.scanLabelList = []
				this.httpRequest1('post', '/system/app/queryOrderScanLabeAbnormalByOmsNo', postData).then(res => {
				if(res.success) {
					that.orderInfo = res.data.order
					that.abnormalList = res.data.abnormalList
					that.scanLabelList = res.data.scanLabelList
					if (!res.data.order || !res.data.order.omsNo) {
						CallAndroidOrIOS.TipAudio();
					}
				} else {
					that.$alert('暂无订单信息!', '提示', {
					confirmButtonText: '确定',
					})
				}
				})
			},
			// 关闭扫描框
			closeScan() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: "离开app原生半屏扫描二维码/条码",
				});
			} catch (error) {}
			},
			//打开或关闭 闪光灯
			flashOpenOrClose() {
			let that = this;
			// 安卓
			try {
				if (that.ifflash) {
				CallAndroidOrIOS.setTorchEnabled_false(); // setTorchEnabled_false  闪光灯 关闭
				that.ifflash = false;
				} else {
				CallAndroidOrIOS.setTorchEnabled_true(); // setTorchEnabled_true  闪光灯 打开
				that.ifflash = true;
				}
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '打开或关闭闪光灯',
				});
			} catch (error) {}
			},
			// 关闭扫码框
			CloseScanBox() {
			// 安卓
			try {
				CallAndroidOrIOS.CancelScan();
			} catch (error) {}
			// 苹果
			try {
				window.webkit.messageHandlers.messageSend.postMessage({
				a: '离开app原生半屏扫描二维码/条码',
				});
			} catch (error) {}
			},
			goPrev() {
				this.closeScan()
				this.$router.go(-1);
			},
			switchScanFun(data) {
				if (data) {
				this.switchScan = true // 打开摄像头
				} else {
				this.switchScan = false // 关闭摄像头
				}
			},
			uploadOnChange(file) {
				this.switchScanFun(true); // 打开摄像头
			}
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	// @import "../../components/publicLess.less";
	.common-box {
		height: 100%;
	}
	.Abnormal {
		font-size: 28/50rem;
		.el-dialog {
			z-index: 9999;
			 
		}
		/deep/ .el-dialog__header {
			padding: 0;
		}
		/deep/ .el-dialog__headerbtn {
			top: 2px;
			right: 5px;
		}
		/deep/ .el-dialog__body {
			padding: 20px 10px;
		}
	}
	.address {
		margin: 10/50rem;
		font-size: 32/50rem;
	}
	.tab {
		display: flex;
		margin-top: 20px;
		font-size: 20px;
		div {
			width: 50%;
			line-height: 26/50rem;
			padding-bottom: 10px;
			text-align: center;
			border-bottom: 2px solid #e1e1e1;
		}
		.active {
			color: #038EEA;
			border-color: #038EEA;
		}
	}
	.scan-label {
		.scan-label-item {
			margin: 10/50rem;
			border: 1px solid #e1e1e1;
			padding: 20/50rem 10/50rem;
			color: #9B9B9B;
			font-size: 32/50rem;
			.time-person {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10/50rem;
			}
			.selectAddress {
				margin-bottom: 10/50rem;
			}
			span {
				color: #000;
			}
		}
	}
	.abnormal-list {
		.abnormal-list-item {
			margin: 10/50rem;
			border: 1px solid #e1e1e1;
			padding: 20/50rem 10/50rem;
			color: #9B9B9B;
			font-size: 32/50rem;
			.time-person {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10/50rem;
			}
			span {
				color: #000;
			}
			.time-person2 {
				display: flex;
				margin-bottom: 10/50rem;
				.left {
					width: 260/50rem;
				}
			}
		}

	}
	.order-list {
		margin: 10px;
		div {
			font-size: 22px;
			span {
				color: #6f7180;
			}
		}
		.no-data {
			text-align: center;
			margin-top: 80px;
			color: #6f7180;
		}
	}
</style>